body {
  background-color: #eff1f3;
}
#profile-picture {
  width: 370px;
  height: 330px;
  margin: auto;
}
#profile-picture * {
  user-select: none;
}
#drag-area {
  width: 330px;
  height: 330px;
  cursor: move;
  cursor: grab;
  display: block;
  overflow: hidden;
  position: relative;
  background-color: #000;
  background-repeat: repeat;
  background-image: url('');
  margin-left: 20px;
}
#drag-area:active {
  cursor: grabbing;
}
#clone-container {
  width: 0px;
  height: 0px;
  display: block;
  overflow: hidden;
  position: absolute;
}
#photo, #photo-clone {
  display: block;
  min-width: 230px;
  min-height: 230px;
  position: absolute;
  pointer-events: none;
}
img[src=''] {
  visibility: hidden;
}
#crop-circle {
  width: 330px;
  height: 330px;
  /*margin: 50px auto;*/
  overflow: hidden;
  position: relative;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff, 0 0 0 100vw rgba(0,0,0,0.5);

}
#circle-center {
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  display: block;
  position: absolute;
  border-radius: 50%;
  background-color: green;
  transform: translate(-50%, -50%);
}
#circle-thirds {
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  border-radius: 100%;
  pointer-events: none;
}
#circle-thirds * {
  z-index: 1;
  position: absolute;
  background-color: rgba(226,226,226,0.5);
}
#circle-thirds .top-horizontal {
  width: 100%;
  height: 1px;
  top: 33.33333%;
}
#circle-thirds .bottom-horizontal {
  width: 100%;
  height: 1px;
  top: 66.66666%;
}
#circle-thirds .left-vertical {
  height: 100%;
  width: 1px;
  left: 33.33333%;
}
#circle-thirds .right-vertical {
  height: 100%;
  width: 1px;
  left: 66.66666%;
}
.photo-options {
  width: 100%;
  display: block;
  position: relative;
  padding-top: 15px;
}
.option-buttons {
  width: 100%;
  display: flex;
  position: relative;
  padding-bottom: 10px;
  justify-content: space-between;
}
.option-buttons button {
  width: 100%;
}
.option-buttons button + button {
  margin-left: 10px;
}
.photo-options fieldset {
  margin: 0px;
}
.photo-options fieldset + fieldset {
  margin-top: 10px;
}
.option-slider {
  display: flex;
  position: relative;
}
.option-slider input[type=range] {
  width: 50%;
  flex-shrink: 0;
}
.option-slider input[type=number] {
  width: 20%;
  margin: 0 10px;
}
.option-slider button {
  width: 30%;
}
#preview-container {
  width: 230px;
  height: 230px;
  margin: 0 auto;
  position: relative;
  border-radius: 50%;
}
#preview-container:empty {
  background-color: rgba(0,0,0,0.25);
  background-repeat: no-repeat;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path d="M41.2 42.4c-3.5-3.2-10-3.5-11.3-6.9-.1-1.6-.1-2.7-.1-4.2.7-.4 2-2.8 2.3-4.9.6 0 1.5-.6 1.7-2.8.1-1.2-.4-1.9-.8-2.1 1-2.8 2.9-11.5-3.5-12.4-.7-1.2-2.4-1.8-4.6-1.8-8.9.2-9.9 6.7-8 14.2-.3.2-.9.9-.8 2.1.3 2.2 1.2 2.8 1.7 2.8.2 2.1 1.6 4.5 2.3 4.9 0 1.5.1 2.6-.1 4.2-1.3 3.4-7.7 3.7-11.5 6.9-1.7 1.5-2.6 3.2-2.6 5.1V50h38v-2.5c-.1-1.9-1-3.6-2.7-5.1z" fill="%23fff"/></svg>');
}
#photo-preview {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 50%;
}
